{% extends "layout.tpl" %}

{% block title %}{% endblock %}

{% block nav %}
	{% import 'nav.tpl' as nav %}
	{{nav.active('study')}}
{% endblock %}

{% block subpage %} class="g-html"{% endblock %}

{% block content %}
	<div class="g-main f-fr">
		<div class="mainbox">
			<h1 class="e-pt20 e-pb20 f-fs28">路由</h1>
			<div class="e-mt15 f-lh22">
				<p>页面不刷新实现页面切换效果，用于开发单页应用</p>
			</div>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">使用模块</h2>
			<div class="e-mt15 f-lh22">
				<p>在页面中创建元素，并包含href属性，并且创建一个空元素作为渲染容器</p>
				<p>
					<a href="/nui/src/components/router.js" class="f-corange" target="_blank">下载</a>
					路由组件作为依赖项引入到模块中，并创建实例，查看
					<a href="./demo.html" class="f-corange" target="_blank">demo</a>
				</p>
			</div>
<script type="text/highlight" data-xml-options>
<a href="/home/" id="home">首页</a>
<a href="/news/" id="news">资讯</a>
<div id="main"></div>
</script>
<script type="text/highlight" data-javascript-options>
Nui.define(['{com}/router'], function(router){
    
	router({
		target:'#home',
		entry:true,
		path:'/home/',
		container:'#main',
		template:'<p>这是首页</p>',
	})

	router({
		target:'#news, .news',
		entry:true,
		path:'/news/:id/:title',
		container:'#main',
		level:2,
		template:{
			list:'<ul>'+
					'<%each list%>'+
					'<li><a href="<%$value.url%>/<%$value.title%>" class="news"><%$value.title%></a></li>'+
					'<%/each%>'+
				'</ul>',
			detail:'<div>'+
						'<h3><%params.title%></h3>'+
						'<p>这是<%params.title%>详情，id是<%params.id%>。</p>'+
					'</div>'
		},
		data:{
			list:[{
				url:'/news/1',
				title:'资讯1'
			},{
				url:'/news/2',
				title:'资讯2'
			}, {
				url:'/news/3',
				title:'资讯3'
			}]
		},
		onChange:function(){
			var tpl = this.template, params = this.data.params;
			if(params.id && params.title){
				tpl.main = tpl.detail;
			}
			else{
				tpl.main = tpl.list;
			}
		}
	})

	router.start()
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">选项参数</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> path</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：路径匹配规则，冒号为动态参数名</p>
				<p>类型：{String}</p>
				<p>默认：null</p>
				<p>必填：<b class="f-cgreen f-fs16">✔</b></p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	path:'/news/:type/:id/'
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> level</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：路径匹配等级</p>
				<p>类型：{Number}</p>
				<p>默认：2</p>
				<p>说明：当匹配规则path中包含参数时才会启用，取值分别为0、1、2。当值为0时url（#!后面路径）必须满足匹配条件，参数不能少；当值为1时允许url少参数，但不能无参数；当值为2时允许url不传参数</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	level:2
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> entry</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：是否为入口页面</p>
				<p>类型：{Boolean}</p>
				<p>默认：false</p>
				<p>说明：页面中只能设置一个入口；当url不满足path规则时，会自动跳转到入口页面</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	entry:true
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> container</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：渲染容器</p>
				<p>类型：{String, Object} 选择器、DOM、jQuery对象</p>
				<p>默认：null</p>
				<p>必填：<b class="f-cgreen f-fs16">✔</b></p>
				<p>说明：wrapper元素所在容器</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	container:'#main'
})
router({
	container:$('#main')
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> target</h3>
			<div class="e-mt15 f-lh22">
				<p>说明：绑定元素</p>
				<p>类型：{String, Object} 选择器、DOM、jQuery对象</p>
				<p>默认：null</p>
				<p>说明：该元素必须已存在，并且包含href属性，且满足path规则</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	target:'#home'
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> wrapper</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：路由实例内容是否独占一个容器（框架自动为内容创建一个&lt;div class="nui-router-wrapper" /&gt;容器，这里简称为wrapper元素吧）</p>
				<p>类型：{Boolean, Selector}</p>
				<p>默认：false</p>
				<p>说明：值为false时，所有设置该值的路由实例内容都将共享一个容器，每次加载都会触发onInit回调；当值为true时，实例会独占一个容器，仅在第一次加载时会触发onInit回调；也可以手动设置wrapper元素，即值为选择器时，元素必须包含类名nui-router-wrapper，且是container的子元素。</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	wrapper:true
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> data</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：模版渲染数据</p>
				<p>类型：{Object}</p>
				<p>默认：{}</p>
				<p>功能：默认值包含path（路由地址），url（包含动态参数路由地址），query（路由查询参数，“?”后面的参数），params（路由参数，包含查询参数与动态参数），默认值不可手动修改。</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	template:'<a href="<%url%>"><%name%></a>',
	data:{
		name:'地址跳转'
	}
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> template</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：渲染模版</p>
				<p>类型：{String, Object}</p>
				<p>默认：''</p>
				<p>说明：当值为对象（多个模版）时，必须存在名称为main模版作为主模版，模版中可以直接访问data中数据</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	template:'<div><%path%></div>'
})
router({
	template:{
		main:'<div><%include 'list'%></div>',
		list:'<p><%each params%>...<%/each%></p>'
	}
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> events</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：绑定事件，用法参考<a class="f-corange" href="/nui/pages/events.html">代理事件</a></p>
				<p>类型：{Object}</p>
				<p>默认值：null</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	events:{
		'click #button':'calback'
	},
	calback:function(){

	}
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onBefore</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：target点击触发，若返回false将不执行后续操作</p>
				<p>类型：{Function}</p>
				<p>默认：null</p>
				<p>参数：change {Function} 调用后会强行切换路由地址</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	onBefore:function(change){
		if(flag){
			return false
		}
		else{
			change()
		}
	}
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onData</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：接收数据时回调</p>
				<p>类型：{Function}</p>
				<p>默认：null</p>
				<p>参数：data {Anything} 接收数据</p>
				<p>说明：配合类方法location使用</p>
			</div>
<script type="text/highlight" data-javascript-options>
router.location('/index/', 'hello world')

router({
	path:'/index/',
	onData:function(data){
		console.log(data) //hello world
	}
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onChange</h3>
			<div class="e-mt15 f-lh22">
				<p>说明：路由地址切换后触发回调</p>
				<p>类型：{Function}</p>
				<p>默认：null</p>
				<p>说明：在渲染模版之前触发，函数返回false时则不会执行渲染模版，不会触发onInit和onAfter</p>
			</div>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onRender</h3>
			<div class="e-mt15 f-lh22">
				<p>说明：渲染模版后触发</p>
				<p>类型：{Function}</p>
				<p>默认：null</p>
				<p>说明：每次调用实例的render方法都会触发</p>
			</div>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onInit</h3>
			<div class="e-mt15 f-lh22">
				<p>说明：渲染模版后触发</p>
				<p>类型：{Function}</p>
				<p>默认：null</p>
				<p>说明：当选项参数wrapper为true时仅会触发一次</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	path:'/news/:type/:id',
	onInit:function(){
		if(data.param.type === '1'){
			this.element.html(data.cache || '<div>.....</div>')
		}
		else{
			this.element.html('<div>.....</div>')
		}
	}
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onAfter</h3>
			<div class="e-mt15 f-lh22">
				<p>说明：渲染模版后触发</p>
				<p>类型：{Function}</p>
				<p>默认：null</p>
				<p>说明：不论选项参数wrapper是何值都触发</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	path:'/news/:type/:id',
	onInit:function(){
		//渲染操作
	},
	onAfter:function(){
		$(this.target).addClass('active').siblings().removeClass('active')
	}
})
</script>
			
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 说明</h3>
			<div class="e-mt15 f-lh22">
				<p>在选项参数函数中可以通过this.element访问到页面容器的jquery实例（类名为nui-router-wrapper的元素），绑定事件必须代理为该元素。<span class="f-cred">万万不可将事件代理到页面加载就存在的元素上，比如documeng或者body，因为每次切换路由都会触发回调导致事件被多次绑定！</span></p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	onInit:function(){
		this.element.find('select').hide();
		this.show()
	},
	show:function(){
		this.bind()
	},
	bind:function(data){
		console.log(data) //加载时打印undefined，当a标签点击后打印hello world
	},
	events:{
		'click a':'check click'
	},
	check:function(){
		return 'hello world'
	},
	click:function(e, elem, data){
		this.bind(data)
	}
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">实例方法</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> render</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：渲染模版，调用后会触发onRender回调，该方法一般在onInit中异步请求数据后调用</p>
				<p>类型：{Function}</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	template:'<%each list%><%$index%>:<%$value%><%/each%>',
	data:{
		list:[]
	},
	onInit:function(){
		var that = this;
		$.get('url', function(res){
			that.data.list = res;
			that.self.render()
		})
	}
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">类方法</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> start</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：初始化了路由跳转到主入口页面</p>
				<p>类型：{Function}</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	target:'#home',
	path:'/home/',
	entry:true
})

router({
	target:'#news',
	path:'/news/'
})

router.start()
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> location</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：路由跳转，跳转的地址必须匹配已设置的路由规则，否则不会跳转</p>
				<p>类型：{Function}</p>
				<p>参数：url {String} 跳转地址</p>
				<p>参数：data {Anything} 跳转传递数据，跳转后的页面通过onData函数可接收</p>
				<p>参数：render {Boolean} 是否重新渲染目标页面</p>
			</div>
<script type="text/highlight" data-javascript-options>
router.location('/index/', {});
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> forward</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：前进，等同history.forward，可无需手动调用该方法，在元素添加类属性nui-router-forward即可</p>
				<p>类型：{Function}</p>
				<p>参数：index {Number} 要访问的url在历史记录的位置</p>
			</div>
<script type="text/highlight" data-javascript-options>
selector.on('click', function(){
	router.forward();
})

<a class="nui-router-forward">前进</a>
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> back</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：返回，等同history.back，可无需手动调用该方法，在元素添加类属性nui-router-back即可</p>
				<p>类型：{Function}</p>
				<p>参数：index {Number} 要访问的url在历史记录的位置</p>
			</div>
<script type="text/highlight" data-javascript-options>
selector.on('click', function(){
	router.back();
})

<a class="nui-router-back">后退</a>
</script>
		</div>	
	</div>
	{% import 'sidecol.tpl' as side %}
	{{side.active('cpns', 'router')}}
{% endblock %}